<template>
  <div id="app">
    <!-- <router-view class="ict-base-view" :transition="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')" keep-alive v-el:active-view></router-view> -->
    <router-view class="" :transition="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')" keep-alive v-el:active-view></router-view>

    <!--bottom slot-->
    <tabbar class="ict_tabber" icon-class="vux-center" v-show="isTabbarView" slot="bottom" v-el:tab-bar>
      <tabbar-item v-link="{path:'/main'}" :selected="currTab === 0" v-touch:tap="currTab=0">
        <span class="home-icon" slot="icon"></span>
        <span class="ict_tabber-label"slot="label">首页</span>
      </tabbar-item>
      <tabbar-item v-link="{path:'/mycourse'}" :selected="currTab === 1" v-touch:tap="currTab=1">
        <span class="my-icon" slot="icon"></span>
        <span slot="label">我的课程</span>
      </tabbar-item>
      <tabbar-item v-link="{path:'/setting'}" :selected="currTab === 2" :badge="badgeNewMsgNum"v-touch:tap="currTab=2">
        <span class="setting-icon" slot="icon"></span>
        <span slot="label">个人中心</span>
      </tabbar-item>
    </tabbar>

    <alert :show.sync="alertBox.show"
           :button-text="alertBox.btnText"
           @on-hide="hideAlert"
           class="ict-alert">{{alertBox.message}}</alert>
    <confirm
             :show.sync="confirmBox.show"
             :title="confirmBox.title"
             :confirm-text="confirmBox.okText"
             :cancel-text="confirmBox.cancelText"
             @on-confirm="confirmBox.okCallback"
             @on-cancel="confirmBox.cancelCallback">
      <p style="text-align:center;">{{{confirmBox.message}}}</p>
    </confirm>

    <div class="ict-toast" v-show.sync="toast.show">
      <div class="ict-toast-content">
        <span :class="{'success':toast.type === 'success'}"></span>
        {{toast.message}}
      </div>
    </div>

    <div id="mask"></div>
    <div id="routerMask"></div>

    <!--新手测试-->
    <!--<div class="newertest-pop" v-if="isShowNewTestPop">-->
      <!--<div class="newertest-pop-close" v-touch:tap="closeNewerTestPop"></div>-->
      <!--<div class="newertest-pop-img">-->
        <!--<img src="./assets/styles/image/newertest/tip/tipImg.png" style=" width: 16.7rem; height: 10.4rem;">-->
      <!--</div>-->
    <!--</div>-->

  </div>
</template>

<script>
  import store from './vuex/store'
  import {messageActions, menberActions} from './vuex/actions'
  import {messageGetters, helpGetters} from './vuex/getters'
  import Alert from 'vux/alert'
  import Toast from 'vux/toast'
  import Confirm from 'vux/confirm'
  import {Tabbar, TabbarItem} from 'vux/tabbar'

  import mixinEvent from './mixinEvent'
  import mixinAjax from './mixinAjax'
  import mixinModal from './mixinModal'
  import mixinBackHandler from './mixinBackHandler'
  import mixinNetwork from './mixinNetwork'
  import mixinStatistics from './mixinStatistics'
  import mixinWxSdk from './mixinWxSdk'

  // import {getQueryString} from './util/urlTool'

  import {eventMap} from './frame/eventConfig'

  export default {
    mixins: [mixinEvent, mixinAjax, mixinModal, mixinBackHandler, mixinNetwork, mixinStatistics, mixinWxSdk],

    store,

    vuex: {
      getters: {
        route: (state) => state.route,
        direction: (state) => state.global.direction,
        newMsgNum: messageGetters.newMsgNum,
        newSuggestionNum: helpGetters.newSuggestionNum
      },

      actions: {
        addNewMessageNum: messageActions.addNewMessageNum,
        getUrlParam: menberActions.getUrlParam
      }
    },

    data () {
      return {
        currTab: 0,
        tabList: [0, 1, 2]
      }
    },

    watch: {
      route (newRoute) {
        this.$dispatch(eventMap.VIEW_CHANGE, newRoute.path)
      }
    },

    computed: {
      badgeNewMsgNum () {
        let num = this.newSuggestionNum + this.newMsgNum
        return num ? (num + '') : ''
      },

      isTabbarView () {
        return !!(this.route.path.match('/main') || this.route.path.match('/setting') || this.route.path.match('/mycourse'))
      }
    },

    created () {
//      this.showNewTestPopIf()
      // let urlParam = getQueryString('userid');
      // let urlParam = this.$route.query.userid;
      // this.getUrlParam(urlParam);
      // window.sessionStorage.setItem('urlParam', urlParam);
    },

    events: {
      [eventMap.ACTIVE_TAB] (itemIndex) {
        this.currTab = itemIndex
      }
    },

    methods: {
      /**
       * 接收消息, 显示消息提示
       */
      onReceiveNotification () {
        this.addNewMessageNum()
      },

      onAction (type) {
        if (type === 'confirm') {
          this.confirmHandler()
        } else if (type === 'cancel') {
          this.cancelHandler()
        }
      }
    },

    components: {
      Alert,
      Toast,
      Tabbar,
      TabbarItem,
      Confirm
    }
  }
</script>

<style lang="scss">
  // @import "assets/styles/animate.less";
  @import './style/common';
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    // margin-top: 60px;
}
  html {
    height: 100%;
    /*font-family: "Microsoft YaHei" ! important;*/
    // font-family:"Microsoft YaHei","微软雅黑",Arial,Helvetica,sans-serif,"宋体";
    overflow-x: hidden;

    padding: 0;
    margin: 0;
    list-style: none;
    font-style: normal;
    text-decoration: none;
    border: none;
    color: #333;
    box-sizing: border-box;
    font-family: "Microsoft Yahei",sans-serif;
    -webkit-tap-highlight-color:transparent;
    -webkit-font-smoothing: antialiased;
  }

</style>
